<template>
		<el-row>
			<template v-for="(item,index) in assetStatistics">
				<div v-if="index<5" :style="'width:'+cardWidth+';padding-right:5px;height: 120px;'"  >
					<el-card shadow="never" style="--el-card-padding: 0px;cursor: pointer;border-radius: 7px;" @click="searchAsset(item)">
						<sc-statistic :title="item.title||'加载中'" :value="(item.Count||0)"
									:valueclass="item.valueclass"
									 :bgclass="item.bgclass"
									 :bgimg="item.bgimg"
									  groupSeparator>
						</sc-statistic>
					</el-card>
				</div>
				<div v-else :style="'width:'+cardWidth+';height: 120px;'"  >
					<el-card shadow="never" style="--el-card-padding: 0px;cursor: pointer;border-radius: 7px;" @click="searchAsset(item)">
						<sc-statistic :title="item.title||'加载中'" :value="(item.Count||'0')" suffix=""
						:valueclass="item.valueclass"
									 :bgclass="item.bgclass"
									 :bgimg="item.bgimg"
									  groupSeparator>
						</sc-statistic>
					</el-card>
				</div>
			</template>
		</el-row>
</template>

<script>
import scStatistic from '@/components/scStatisticIndex';
import globalparam from "@/constant/model/globalparam";
import useTabs from "@/utils/useTabs";

export default {
	name: 'assetStatistic',
	components: {
		// scStatistic
	},
	data() {
		return {
			trendValue1: 7.7,
			trendValue2: -18.9,
			assetStatusRange: [],
			cardWidth:"100%",
			assetStatistics: [{
				title:"待入库单据",
				Count:126,
				bgclass:"bg1",
				bgimg:"bgimg1",
				valueclass:"value1"
			},{
				title:"转移中单据",
				Count:21,
				bgclass:"bg2",
				bgimg:"bgimg2",
				valueclass:"value2"
			},{
				title:"调拨中",
				Count:13,
				bgclass:"bg3",
				bgimg:"bgimg3",
				valueclass:"value3"
			},{
				title:"报废中",
				Count:6,
				bgclass:"bg4",
				bgimg:"bgimg4",
				valueclass:"value4"
			},{
				title:"超时单据",
				Count:5,
				bgclass:"bg5",
				bgimg:"bgimg5",
				valueclass:"value4"
			},{
				title:"异常单据",
				Count:7,
				bgclass:"bg6",
				bgimg:"bgimg6",
				valueclass:"value6"
			}],
		}
	},
	created() {
	},
	async mounted() {
		/*
		this.assetStatusRange = await this.$cache.data.loadGlobalParam(globalparam.assetStatisticsStatusRange.paramCode);
		if (Array.isArray(this.assetStatusRange)) {
			if(this.assetStatusRange.length>0){
				this.assetStatistics.push({assetStatusId: "ALL",title:"总资产"});
			}
			this.assetStatusRange.forEach(item => {
				this.assetStatistics.push({assetStatusId: item});
			});

			await this.queryAssetStatistics();
		}
		*/
		this.cardWidth=((window.innerWidth-208-86-25)/this.assetStatistics.length)+"px";

	},
	methods: {
		async queryAssetStatistics() {
			let assetStatisticsRange = await this.$cache.data.loadGlobalParam(globalparam.assetStatisticsRange.paramCode);
			if (Array.isArray(this.assetStatusRange)) {
				let res = await this.$API.asset.asset.assetStatistics.post({
					assetStatusIds: this.assetStatusRange,
					assetStatisticsRange: assetStatisticsRange,
          deptIds: this.$TOOL.current.readDeptIds(),
          assetCategoryIds: this.$TOOL.current.readAssetCategoryIds()
				});
				if (res.code === 2000) {
					if (Array.isArray(res.data)) {
						let i=0;
						for (const item of this.assetStatistics) {
							for (const _item of res.data) {
								if (item.assetStatusId === _item.assetStatusId) {
									Object.assign(item, _item);
								}
								let title = await this.$cache.dic.label('ASSET_STATUS',item.assetStatusId);
								item.title = item.title || title;

							}
							if(i==0){
									item.bgcolor="#28C195";
								}else if(i==1){
									item.bgcolor="#FF933B";
								}else if(i==2){
									item.bgcolor="#F76B57";
								}else if(i==3){
									item.bgcolor="#9BABFF";
								}else if(i==4){
									item.bgcolor="#3598DC";
								}else if(i==5){
									item.bgcolor="#A0B0BA";
								}else{
									item.bgcolor="#F76B57";
								}
								i=i+1;
						}
					}
				}
			}
		},
		async searchAsset(item) {
			let title = "首页"+item.title+"资产明细";
			//跳转到搜索台账页面
			let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);//当前页面的路由地址
			let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
			/**
			 *  1 = 根据管理部门，根据登录账户管理范围，资产的管理部门在账户管理范围内的显示<br>
			 *  2 = 根据使用部门，根据登录账户管理范围，资产的使用部门在账户管理范围内的显示<br>
			 *  3 = 根据管理部门或使用部门，根据登录账户管理范围，资产的使用部门或管理部门在账户管理范围内的显示<br>
			 *  其它 = 根据管理部门，按台账，根据使用部门或管理部门或借用部门在管理范围内的
			 */
			let assetStatisticsRange = await this.$cache.data.loadGlobalParam(globalparam.assetStatisticsRange.paramCode);//统计范围,获取全局配置参数
			//设置搜索参数
			let routeParams = {
				id: key,
				title: title,
				fixedParams:{
					assetStatisticsRange:assetStatisticsRange,
				},//固定搜索参数，打开页面后，用户通过搜索界面的清空按钮无法清除
				searchParams: {
					assetStatusId: item.assetStatusId==="ALL"?"":item.assetStatusId,
				}//搜索参数，打开页面后，会设置在搜索界面搜索参数的默认值，用户可以改变
			};
			this.$store.dispatch("addRouteParams", routeParams);
			this.$router.push({
				name: "toAssetList",
				params: {fromRouteId: fromRouteId, key: key}
			});
		}
	}
}
</script>

<style scoped>
.el-card {
	margin-bottom: 0px;
	padding: 0px;

}
.el-card__body {
    padding: 0px !important;
}

.up {
	color: #F56C6C;
	margin-left: 5px;
}

.down {
	color: #67C23A;
	margin-left: 5px;
}
</style>
